<template>
  <section class="h-100 position-relative">
    <div
      :id="mapName"
      :style="{ height:height, minHeight:minHeight, width: '100%',backgroundColor: backgroundColor}"
    ></div>
    <div v-show="isShow">
      <input
        class="esri-component esri-widget--button esri-widget esri-interactive"
        ref="switch"
        type="button"
        id="switch-btn"
        value="3D"
        @click="switchView()"
      >
    </div>
  </section>
</template>

<script>
import { loadModules } from "esri-loader";

// 公司地图服务已停止
// 暂时用案例的url
const tempGLayerId = "tempGraphicsLayer";

const requireMap = [
  "esri/Map",
  "esri/views/MapView", // Require the TileLayer module
  "esri/widgets/BasemapToggle"
];
const requireTileMap = [
  "esri/Map",
  "esri/views/MapView", // Require the TileLayer module
  "esri/layers/WebTileLayer",
  "esri/layers/support/TileInfo",
  "esri/geometry/Extent",
  "esri/widgets/BasemapToggle"
];
const requireGraphicLayer = ["esri/layers/GraphicsLayer"];
const requirePolygon = [
  "esri/symbols/SimpleFillSymbol",
  "esri/geometry/Polygon",
  "esri/Graphic",
  "esri/geometry/support/webMercatorUtils"
];
const requirePolyline = [
  "esri/symbols/SimpleLineSymbol",
  "esri/geometry/Polyline",
  "esri/Graphic",
  "esri/geometry/support/webMercatorUtils"
];
const requirePolygonCircle = [
  "esri/symbols/SimpleFillSymbol",
  "esri/geometry/Circle",
  "esri/Graphic",
  "esri/geometry/support/webMercatorUtils"
];

const requireMarker = [
  "esri/Graphic",
  "esri/symbols/TextSymbol",
  "esri/geometry/support/webMercatorUtils"
];
const requireWebMercator = ["esri/geometry/support/webMercatorUtils"];
// cf9d998f86ea43164fe083983e6f4a68
const tk = "496176468348ab62b8d5352982b284ae";
const webTildLayerUrl = {
  cia:
    "https://{subDomain}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles&tk=" +
    tk,
  DT:
    "https://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&y={row}&x={col}&l={level}&tk=" +
    tk
};
const baseTildLayerUrl =
  "https://{subDomain}.tianditu.gov.cn/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" +
  tk;

const baseUrlServer = "//survey-oss.e-tudou.com/";

/*const url =
  "http://localhost:8089/arcgis_js_v49_api/arcgis_js_api/library/4.9/dojo/dojo.js";
const fcl =
  "http://localhost:8089/arcgis_js_v49_api/arcgis_js_api/library/4.9/fcl/";
*/
const mapConfigOptions = {
  // tell Dojo where to load other packages
  url: baseUrlServer + "arcgis-api/dojo/dojo.js",
  //version: "4.9",
  dojoConfig: {
    async: true,
    tlmSiblingOfDojo: false,
    packages: [
      {
        name: "fcl",
        location: baseUrlServer + "/arcgis-api/fcl/"
      }
    ]
  }
};

const wkid = 4326;
export default {
  name: "mapControl",
  title: "地图控件",
  props: {
    height: {
      type: String,
      default: "100px"
    },
    backgroundColor: {
      type: String,
      default: "white"
    },
    minHeight: {
      type: String,
      default: "100px"
    },
    mapName: {
      type: String,
      default: "arcgis3d"
    }
  },
  data() {
    return {
      isShow: false,
      graphicsLayer: null,
      mainMap: null,
      mainView: null,
      currentSelectGraphic: null
    };
  },
  mounted() {},
  methods: {
    loadVectorMap(mapOptions) {
      return loadModules(requireMap, mapConfigOptions)
        .then(([EsriMap, MapView, BasemapToggle]) => {
          return new Promise((resolve, reject) => {
            let map = new EsriMap();
            this.mainMap = map;
            let _this = this;
            var view = new MapView({
              map: map, // References a Map instance
              container: _this.mapName // References the ID of a DOM element
            });
            var toggle = new BasemapToggle({
              view: view
            });
            if (!mapOptions) {
              mapOptions = {};
            }
            view.center = mapOptions.center || this.$commonUtils.provinceCenter;
            view.scale = mapOptions.scale || 4000000;
            view.ui._removeComponents(["attribution", "zoom"]);
            this.mainView = view;
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    loadWebTileMap(mapOptions) {
      return loadModules(requireTileMap, mapConfigOptions)
        .then(
          ([
            EsriMap,
            MapView,
            WebTileLayer,
            TileInfo,
            Extent,
            BasemapToggle
          ]) => {
            return new Promise((resolve, reject) => {
              var tileInfo = new TileInfo({
                dpi: 90,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                  x: -180,
                  y: 90
                },
                spatialReference: {
                  wkid: wkid
                },
                lods: [
                  {
                    level: 2,
                    levelValue: 2,
                    resolution: 0.3515625,
                    scale: 147748796.52937502
                  },
                  {
                    level: 3,
                    levelValue: 3,
                    resolution: 0.17578125,
                    scale: 73874398.264687508
                  },
                  {
                    level: 4,
                    levelValue: 4,
                    resolution: 0.087890625,
                    scale: 36937199.132343754
                  },
                  {
                    level: 5,
                    levelValue: 5,
                    resolution: 0.0439453125,
                    scale: 18468599.566171877
                  },
                  {
                    level: 6,
                    levelValue: 6,
                    resolution: 0.02197265625,
                    scale: 9234299.7830859385
                  },
                  {
                    level: 7,
                    levelValue: 7,
                    resolution: 0.010986328125,
                    scale: 4617149.8915429693
                  },
                  {
                    level: 8,
                    levelValue: 8,
                    resolution: 0.0054931640625,
                    scale: 2308574.9457714846
                  },
                  {
                    level: 9,
                    levelValue: 9,
                    resolution: 0.00274658203125,
                    scale: 1154287.4728857423
                  },
                  {
                    level: 10,
                    levelValue: 10,
                    resolution: 0.001373291015625,
                    scale: 577143.73644287116
                  },
                  {
                    level: 11,
                    levelValue: 11,
                    resolution: 0.0006866455078125,
                    scale: 288571.86822143558
                  },
                  {
                    level: 12,
                    levelValue: 12,
                    resolution: 0.00034332275390625,
                    scale: 144285.93411071779
                  },
                  {
                    level: 13,
                    levelValue: 13,
                    resolution: 0.000171661376953125,
                    scale: 72142.967055358895
                  },
                  {
                    level: 14,
                    levelValue: 14,
                    resolution: 8.58306884765625e-5,
                    scale: 36071.483527679447
                  },
                  {
                    level: 15,
                    levelValue: 15,
                    resolution: 4.291534423828125e-5,
                    scale: 18035.741763839724
                  },
                  {
                    level: 16,
                    levelValue: 16,
                    resolution: 2.1457672119140625e-5,
                    scale: 9017.8708819198619
                  },
                  {
                    level: 17,
                    levelValue: 17,
                    resolution: 1.0728836059570313e-5,
                    scale: 4508.9354409599309
                  },
                  {
                    level: 18,
                    levelValue: 18,
                    resolution: 5.3644180297851563e-6,
                    scale: 2254.4677204799655
                  },
                  {
                    level: 19,
                    levelValue: 19,
                    resolution: 2.68220901489257815e-6,
                    scale: 1127.23386023998275
                  },
                  {
                    level: 20,
                    levelValue: 2,
                    resolution: 1.341104507446289075e-6,
                    scale: 563.616930119991375
                  }
                ]
              });
              var layer = new WebTileLayer({
                urlTemplate: webTildLayerUrl.cia,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: wkid }
              });
              var layerNo = new WebTileLayer({
                urlTemplate: baseTildLayerUrl,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: wkid }
              });
              let map = new EsriMap({
                spatialReference: {
                  wkid: wkid
                },
                basemap: {
                  baseLayers: [layer, layerNo]
                }
              });
              this.mainMap = map;
              let _this = this;
              var view = new MapView({
                map: map, // References a Map instance
                container: _this.mapName, // References the ID of a DOM element
                spatialReference: {
                  wkid: wkid
                },
                constraints: {
                  minScale: 50, // User cannot zoom out beyond a scale of 1:500,000
                  maxScale: 0, // User can overzoom tiles
                  rotationEnabled: false, // Disables map rotation
                  lods: tileInfo.lods
                }
              });
              if (!mapOptions) {
                mapOptions = {};
              }
              view.center =
                mapOptions.center || this.$commonUtils.provinceCenter;
              view.scale = mapOptions.scale || 4000000;
              this.mainView = view;
              view.ui._removeComponents(["attribution", "zoom"]);

              resolve(true);
            }).catch(err => {
              console.log(err);
            });
          }
        )
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    creatGraphicsLayer() {
      return loadModules(requireGraphicLayer)
        .then(([GraphicsLayer]) => {
          return new Promise((resolve, reject) => {
            if (this.graphicsLayer == null) {
              this.graphicsLayer = new GraphicsLayer();
              this.graphicsLayer.id = tempGLayerId;
              this.mainMap.add(this.graphicsLayer);
            }
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    creatTempGraphicsLayer(layerId) {
      return loadModules(requireGraphicLayer)
        .then(([GraphicsLayer]) => {
          return new Promise((resolve, reject) => {
            if (this.mainMap.findLayerById(layerId) == null) {
              let gLayer = new GraphicsLayer();
              gLayer.id = layerId;
              this.mainMap.add(gLayer);
            }
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addMultiplePolygon(points, fillColor, outlineColor, attributes) {
      return loadModules(requirePolygon)
        .then(([SimpleFillSymbol, Polygon, Graphic]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            var symbol = {
              type: "simple-fill",
              color: fillColor,
              style: "solid",
              outline: {
                color: outlineColor
              }
            };
            const polygons = new Polygon({ rings: points });
            //polygons.addRing(points);
            var graphic = new Graphic(polygons, symbol);
            if (attributes != undefined) {
              graphic.attributes = attributes;
            }
            this.graphicsLayer.graphics.add(graphic);
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addCommonMultiplePolygon(points, options) {
      return loadModules(requirePolygon)
        .then(([SimpleFillSymbol, Polygon, Graphic]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            if (!options) {
              options = {};
            }
            let defaultFillColor = options.fillColor || "#0AD30D";
            let defaultOutlineColor = options.outlineColor || "#000033";
            var symbol = {
              type: "simple-fill",
              color: defaultFillColor,
              style: "solid",
              outline: {
                color: defaultOutlineColor
              }
            };
            const polygons = new Polygon({ rings: points });
            //polygons.addRing(points);
            var graphic = new Graphic(polygons, symbol);
            graphic.attributes = options.attributes;
            if (options.layerId) {
              let tempL = this.mainMap.findLayerById(layerId);
              if (tempL != null) {
                tempL.graphics.add(graphic);
              }
            } else {
              this.graphicsLayer.graphics.add(graphic);
            }
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addSinglePolygonCircle(centerPoint, radus, options) {
      let _this = this;
      return loadModules(requirePolygonCircle)
        .then(([SimpleFillSymbol, Circle, Graphic]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            if (!options) {
              options = {};
            }
            let defaultFillColor = options.fillColor || "#0AD30D";
            let defaultOutlineColor = options.outlineColor || "#000033";
            var symbol = {
              type: "simple-fill",
              color: defaultFillColor,
              style: "solid",
              outline: {
                color: defaultOutlineColor
              }
            };
            const circle = new Circle({ center: centerPoint, radius: radus });
            //polygons.addRing(points);
            var graphic = new Graphic(circle, symbol);
            graphic.attributes = options.attributes;
            if (options.layerId) {
              let tempL = _this.mainMap.findLayerById(layerId);
              if (tempL != null) {
                tempL.graphics.add(graphic);
              }
            } else {
              _this.graphicsLayer.graphics.add(graphic);
            }
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addSinglePolygon(points, fillColor, outlineColor, attributes) {
      return loadModules(requirePolygon)
        .then(([SimpleFillSymbol, Polygon, Graphic]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            var symbol = {
              type: "simple-fill",
              color: fillColor,
              style: "solid",
              outline: {
                color: outlineColor
              }
            };
            const polygons = new Polygon();
            polygons.addRing(points);
            var graphic = new Graphic(polygons, symbol);
            if (attributes != undefined) {
              graphic.attributes = attributes;
            }
            this.graphicsLayer.graphics.add(graphic);
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addSingleCommonPolygon(points, options) {
      return loadModules(requirePolygon)
        .then(([SimpleFillSymbol, Polygon, Graphic]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            let defaultFillColor = options.fillColor || "#0AD30D";
            let defaultOutlineColor = options.outlineColor || "#000033";
            var symbol = {
              type: "simple-fill",
              color: defaultFillColor,
              style: "solid",
              outline: {
                color: defaultOutlineColor
              }
            };
            const polygons = new Polygon();
            polygons.addRing(points);
            var graphic = new Graphic(polygons, symbol);

            graphic.attributes = options.attributes;
            if (options.layerId) {
              let tempL = this.mainMap.findLayerById(layerId);
              if (tempL != null) {
                tempL.graphics.add(graphic);
              }
            } else {
              this.graphicsLayer.graphics.add(graphic);
            }
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    //加载一个线
    addPolyline(points, color, width) {
      return loadModules(requirePolyline)
        .then(([SimpleLineSymbol, Polyline, Graphic, webMercatorUtils]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            var lineSymbol = {
              type: "simple-line", // autocasts as new SimpleLineSymbol()
              color: color, // RGB color values as an array
              width: width
            };
            const polyline = new Polyline({
              hasZ: false,
              hasM: true,
              spatialReference: { wkid: wkid }
            });

            polyline.addPath(points);
            var graphic = new Graphic(polyline, lineSymbol);
            this.graphicsLayer.graphics.add(graphic);
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    //加载多个线
    addMultiplePolyline(points, color, width) {
      return loadModules(requirePolyline)
        .then(([SimpleLineSymbol, Polyline, Graphic, webMercatorUtils]) => {
          return new Promise((resolve, reject) => {
            //设置线的样式
            var lineSymbol = {
              type: "simple-line", // autocasts as new SimpleLineSymbol()
              color: color, // RGB color values as an array
              width: width
            };
            const polyline = new Polyline({
              hasZ: false,
              hasM: true,
              spatialReference: { wkid: wkid },
              paths: points
            });

            var graphic = new Graphic(polyline, lineSymbol);
            this.graphicsLayer.graphics.add(graphic);
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    mapAddTempGraLayer() {
      let gLayer = this.mainMap.findLayerById(tempGLayerId);
      if (gLayer == null || gLayer == "" || gLayer == undefined) {
        this.mainMap.add(this.graphicsLayer);
      }
    },
    mapCenterAt(point, zoom, scale) {
      if (this.mainView == null) {
        console.log("The view's resources failed to load: ", error);
        retrun;
      }
      let _this = this;
      this.mainView.when(
        function() {
          _this.mainView.center = point;
          if (zoom != undefined) {
            _this.mainView.zoom = zoom;
          }
          if (scale != undefined) {
            _this.mainView.scale = scale;
          }
        },
        function(error) {
          console.log("The view's resources failed to load: ", error);
        }
      );
    },
    addImageLableToMap(longitude, latitude, url, options) {
      return loadModules(requireMarker)
        .then(([Graphic, TextSymbol, webMercatorUtils]) => {
          return new Promise((resolve, reject) => {
            if (!options) {
              options = {};
            }
            let width = options.width || "15px";
            let height = options.height || "15px";
            let image = {
              type: "picture-marker",
              url: url,
              width: width,
              height: height
            };
            //设置点的位置
            let position = {
              type: "point",
              longitude: longitude,
              latitude: latitude
            };
            //将点的样式和位置放在Graphic里面
            let graphic = new Graphic({
              geometry: position,
              symbol: image
            });
            this.graphicsLayer.graphics.add(graphic);
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addMarkerToMap(longitude, latitude, url, angle, options) {
      return loadModules(requireMarker)
        .then(([Graphic, TextSymbol, webMercatorUtils]) => {
          return new Promise((resolve, reject) => {
            let width = options.width || "20px";
            let height = options.height || "20px";
            let image = {
              type: "picture-marker",
              url: url,
              width: width,
              height: height,
              angle: angle
            };
            //设置点的位置
            let position = {
              type: "point",
              longitude: longitude,
              latitude: latitude
            };
            //将点的样式和位置放在Graphic里面
            let graphic = new Graphic({
              geometry: position,
              symbol: image
            });
            this.graphicsLayer.graphics.add(graphic);
            resolve(graphic);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addMarkerToLayer(longitude, latitude, url, angle, layerId, options) {
      return loadModules(requireMarker)
        .then(([Graphic, TextSymbol, webMercatorUtils]) => {
          return new Promise((resolve, reject) => {
            let width = options.width || "20px";
            let height = options.height || "20px";
            let image = {
              type: "picture-marker",
              url: url,
              width: width,
              height: height,
              angle: angle
            };
            //设置点的位置
            let position = {
              type: "point",
              longitude: longitude,
              latitude: latitude
            };
            //将点的样式和位置放在Graphic里面
            let graphic = new Graphic({
              geometry: position,
              symbol: image
            });
            if (options) {
              if (options.attributes) {
                graphic.attributes = options.attributes;
              }
            }
            let tempL = this.mainMap.findLayerById(layerId);
            if (tempL != null) {
              tempL.graphics.add(graphic);
            }
            resolve(graphic);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    addTextLableToMap(longitude, latitude, text, fontSize, fontColor) {
      return loadModules(requireMarker)
        .then(([Graphic, TextSymbol, webMercatorUtils]) => {
          return new Promise((resolve, reject) => {
            fontSize = fontSize == undefined ? 18 : fontSize;
            fontColor = fontColor == undefined ? "#7A003C" : fontColor;
            const textSymbol = {
              type: "text", // autocasts as new TextSymbol()
              color: fontColor,
              text: text, // esri-icon-map-pin
              font: {
                size: fontSize
              }
            };

            //设置点的位置
            let position = {
              type: "point",
              longitude: longitude,
              latitude: latitude
            };
            //将点的样式和位置放在Graphic里面
            let graphic = new Graphic({
              geometry: position,
              symbol: textSymbol
            });
            this.graphicsLayer.graphics.add(graphic);
            resolve(true);
          }).catch(err => {
            console.log(err);
          });
        })
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    removeGraphics() {
      if (this.graphicsLayer != null) {
        this.graphicsLayer.graphics.removeAll();
      }
    },
    removeAllTempLayersGraphic(layerId) {
      if (this.mainMap == null) {
        return;
      }
      let tempL = this.mainMap.findLayerById(layerId);
      if (tempL != null) {
        tempL.graphics.removeAll();
      }
    },
    removeTempLayersGraphic(layerId, graphic) {
      let tempL = this.mainMap.findLayerById(layerId);
      if (tempL != null) {
        tempL.graphics.remove(graphic);
      }
    },
    dispatchGrapicsEvent() {
      if (this.mainView != null) {
        let currentView = this.mainView;
        let _this = this;
        this.mainView.on("pointer-up", function(event) {
          if (_this.currentSelectGraphic != null) {
            _this.currentSelectGraphic.symbol = _this.changePolygonGrapicSymbol(
              _this.currentSelectGraphic,
              1
            );
          }
          currentView.hitTest(event).then(function(response) {
            // check if a feature is returned from the hurricanesLayer
            // do something with the result graphic
            const graphics = response.results.filter(function(result) {
              return (
                result.graphic.attributes !== undefined &&
                result.graphic.attributes !== null
              );
            });
            let graphic = null;
            if (graphics != null && graphics.length > 0) {
              graphic = graphics[0];
              graphic.x = event.x;
              graphic.y = event.y;

              graphic.graphic.symbol = _this.changePolygonGrapicSymbol(
                graphic.graphic,
                0.5
              );
            }
            _this.currentSelectGraphic = graphic.graphic;
            _this.$emit("graphicClick", graphic);
          });
        });
      }
    },
    changePolygonGrapicSymbol(graphic, a) {
      let symbol = graphic.symbol;
      let newColor = graphic.symbol.color;
      var symbolnew = {
        type: "simple-fill",
        color: { r: newColor.r, g: newColor.g, b: newColor.b, a: a },
        style: "solid",
        outline: {
          color: graphic.symbol.outline.color
        }
      };
      return symbolnew;
    },
    changeMarkerSymbol(graphic, url, options) {
      let symbol = graphic.symbol;
      let width = options.width || symbol.width;
      let height = options.height || symbol.height;
      let angle = options.angle || symbol.angle;
      let color = graphic.symbol.color;
      var symbolnew = {
        type: "picture-marker",
        url: url,
        width: width,
        height: height,
        angle: angle,
        color: color
      };
      graphic.symbol = symbolnew;
    },
    getChoiceGraphics() {
      this.hitTestGraphic("click");
    },
    hitTestGraphic(eventName) {
      this.hitTestGraphicEvent(eventName, "getChoiceGraphics");
    },
    hitTestGraphicEvent(eventName, emitName) {
      if (this.mainView != null) {
        let currentView = this.mainView;
        let _this = this;
        this.mainView.on(eventName, function(event) {
          currentView.hitTest(event).then(function(response) {
            const graphics = response.results.filter(function(result) {
              return (
                result.graphic.attributes !== undefined &&
                result.graphic.attributes !== null
              );
            });
            let graphic = {};
            if (graphics != null && graphics.length > 0) {
              graphic.selectGraphics = graphics;
              graphic.x = event.x;
              graphic.y = event.y;
            }
            _this.$emit(emitName, graphic);
          });
        });
      }
    },
    findAllGraphicsInLayer(layerId) {
      let tempL = this.mainMap.findLayerById(layerId);
      if (tempL != null) {
        return temp.graphics;
      }
      return [];
    },
    removeGraphicsLayer(layerId) {
      let tempL = this.mainMap.findLayerById(layerId);
      if (tempL != null) {
        this.mainMap.layers.remove(tempL);
      }
    },
    clusterLayer(data, makerUrl, layerId, clusterOptions) {
      return loadModules(
        [
          "esri/Map",
          "fcl/FlareClusterLayer_v4",
          "esri/renderers/ClassBreaksRenderer",
          "esri/layers/GraphicsLayer",
          "esri/views/MapView"
        ],
        mapConfigOptions
      )
        .then(
          ([
            EsriMap,
            FlareClusterLayer,
            ClassBreaksRenderer,
            GraphicsLayer,
            MapView
          ]) => {
            let _this = this;
            return new Promise((resolve, reject) => {
              let width = "20px",
                height = "20px";
              if (clusterOptions) {
                width = clusterOptions.width || "20px";
                height = clusterOptions.height || "20px";
              }
              let defaultSym = {
                type: "picture-marker",
                url: makerUrl,
                width: "20px",
                height: "20px"
              };

              let renderer = new ClassBreaksRenderer({
                symbol: defaultSym
              });
              renderer.field = "clusterCount";
              let smSymbol = {
                type: "simple-marker",
                size: 22,
                outline: { color: [221, 159, 34, 0.8] },
                color: [255, 204, 102, 0.8]
              };
              let mdSymbol = {
                type: "simple-marker",
                size: 24,
                outline: { color: [82, 163, 204, 0.8] },
                color: [102, 204, 255, 0.8]
              };
              let lgSymbol = {
                type: "simple-marker",
                size: 28,
                outline: { color: [41, 163, 41, 0.8] },
                color: [51, 204, 51, 0.8]
              };
              let xlSymbol = {
                type: "simple-marker",
                size: 32,
                outline: { color: [200, 52, 59, 0.8] },
                color: [250, 65, 74, 0.8]
              };

              renderer.addClassBreakInfo(0, 19, smSymbol);
              renderer.addClassBreakInfo(20, 150, mdSymbol);
              renderer.addClassBreakInfo(151, 1000, lgSymbol);
              renderer.addClassBreakInfo(1001, Infinity, xlSymbol);
              let areaRenderer;
              // if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
              let defaultAreaSym = {
                type: "simple-fill",
                style: "solid",
                color: [0, 0, 0, 0.2],
                outline: { color: [0, 0, 0, 0.3] }
              };
              areaRenderer = new ClassBreaksRenderer({
                symbol: defaultAreaSym
              });
              areaRenderer.field = "clusterCount";
              let smAreaSymbol = {
                type: "simple-fill",
                color: [255, 204, 102, 0.4],
                outline: {
                  color: [221, 159, 34, 0.8],
                  style: "dash"
                }
              };
              let mdAreaSymbol = {
                type: "simple-fill",
                color: [102, 204, 255, 0.4],
                outline: {
                  color: [82, 163, 204, 0.8],
                  style: "dash"
                }
              };
              let lgAreaSymbol = {
                type: "simple-fill",
                color: [51, 204, 51, 0.4],
                outline: {
                  color: [41, 163, 41, 0.8],
                  style: "dash"
                }
              };
              let xlAreaSymbol = {
                type: "simple-fill",
                color: [250, 65, 74, 0.4],
                outline: {
                  color: [200, 52, 59, 0.8],
                  style: "dash"
                }
              };
              areaRenderer.addClassBreakInfo(0, 19, smAreaSymbol);
              areaRenderer.addClassBreakInfo(20, 150, mdAreaSymbol);
              areaRenderer.addClassBreakInfo(151, 1000, lgAreaSymbol);
              areaRenderer.addClassBreakInfo(1001, Infinity, xlAreaSymbol);
              // Set up another class breaks renderer to style the flares individually
              let flareRenderer = new ClassBreaksRenderer({
                symbol: renderer.defaultSymbol
              });
              flareRenderer.field = "clusterCount";

              let smFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [255, 204, 102, 0.8],
                outline: { color: [221, 159, 34, 0.8] }
              };
              let mdFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [102, 204, 255, 0.8],
                outline: { color: [82, 163, 204, 0.8] }
              };
              let lgFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [51, 204, 51, 0.8],
                outline: { color: [41, 163, 41, 0.8] }
              };
              let xlFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [250, 65, 74, 0.8],
                outline: { color: [200, 52, 59, 0.8] }
              };
              flareRenderer.addClassBreakInfo(0, 19, smFlareSymbol);
              flareRenderer.addClassBreakInfo(20, 150, mdFlareSymbol);
              flareRenderer.addClassBreakInfo(151, 1000, lgFlareSymbol);
              flareRenderer.addClassBreakInfo(1001, Infinity, xlFlareSymbol);
              let initOptions = {
                id: layerId,
                clusterRenderer: renderer,
                areaRenderer: areaRenderer,
                flareRenderer: flareRenderer,
                //singlePopupTemplate: popupTemplate,
                spatialReference: { wkid: wkid },
                subTypeFlareProperty: clusterOptions.flareProperty,
                singleFlareTooltipProperty: clusterOptions.name || "name",
                displaySubTypeFlares: true,
                maxSingleFlareCount: 8,
                singleSymbol: defaultSym,
                clusterRatio: 75,
                clusterAreaDisplay: "activated",
                xPropertyName: clusterOptions.lng,
                yPropertyName: clusterOptions.lat,
                data: data
              };
              let clusterLayer = new FlareClusterLayer.FlareClusterLayer(
                initOptions
              );
              _this.mainMap.add(clusterLayer);
              resolve(true);
            });
          }
        )
        .catch(err => {
          console.log("地图加载失败", err);
        });
    },
    clusterLayerSingle(data, makerUrl, layerId, clusterOptions) {
      return loadModules(
        [
          "esri/Map",
          "fcl/FlareClusterLayer_v4",
          "esri/renderers/ClassBreaksRenderer",
          "esri/layers/GraphicsLayer",
          "esri/views/MapView"
        ],
        mapConfigOptions
      )
        .then(
          ([
            EsriMap,
            FlareClusterLayer,
            ClassBreaksRenderer,
            GraphicsLayer,
            MapView
          ]) => {
            let _this = this;
            return new Promise((resolve, reject) => {
              let width = "20px",
                height = "20px";
              if (clusterOptions) {
                width = clusterOptions.width || "20px";
                height = clusterOptions.height || "20px";
              }
              let defaultSym = {
                type: "picture-marker",
                url: makerUrl,
                width: "20px",
                height: "20px"
              };
              let defaultFillColor = [64, 224, 208, 0.8];
              let defaultOutColor = [255, 255, 255];
              let renderer = new ClassBreaksRenderer({
                symbol: defaultSym
              });
              renderer.field = "clusterCount";
              let smSymbol = {
                type: "simple-marker",
                size: 22,
                outline: { color: [221, 159, 34, 0.8] },
                color: [255, 204, 102, 0.8]
              };
              let mdSymbol = {
                type: "simple-marker",
                size: 24,
                outline: { color: [82, 163, 204, 0.8] },
                color: [102, 204, 255, 0.8]
              };
              let lgSymbol = {
                type: "simple-marker",
                size: 28,
                outline: { color: [41, 163, 41, 0.8] },
                color: [51, 204, 51, 0.8]
              };
              let xlSymbol = {
                type: "simple-marker",
                size: 32,
                outline: { color: [200, 52, 59, 0.8] },
                color: [250, 65, 74, 0.8]
              };

              //renderer.addClassBreakInfo(0, 19, smSymbol);
              //renderer.addClassBreakInfo(20, 150, mdSymbol);
              renderer.addClassBreakInfo(0, Infinity, lgSymbol);
              //renderer.addClassBreakInfo(1001, Infinity, xlSymbol);
              let areaRenderer;
              // if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
              let defaultAreaSym = {
                type: "simple-fill",
                style: "solid",
                color: [0, 0, 0, 0.2],
                outline: { color: [0, 0, 0, 0.3] }
              };
              areaRenderer = new ClassBreaksRenderer({
                symbol: defaultAreaSym
              });
              areaRenderer.field = "clusterCount";
              let smAreaSymbol = {
                type: "simple-fill",
                color: [255, 204, 102, 0.4],
                outline: {
                  color: [221, 159, 34, 0.8],
                  style: "dash"
                }
              };
              let mdAreaSymbol = {
                type: "simple-fill",
                color: [102, 204, 255, 0.4],
                outline: {
                  color: [82, 163, 204, 0.8],
                  style: "dash"
                }
              };
              let lgAreaSymbol = {
                type: "simple-fill",
                color: [51, 204, 51, 0.4],
                outline: {
                  color: [41, 163, 41, 0.8],
                  style: "dash"
                }
              };
              let xlAreaSymbol = {
                type: "simple-fill",
                color: [250, 65, 74, 0.4],
                outline: {
                  color: [200, 52, 59, 0.8],
                  style: "dash"
                }
              };
              //areaRenderer.addClassBreakInfo(0, 19, smAreaSymbol);
              //areaRenderer.addClassBreakInfo(20, 150, mdAreaSymbol);
              areaRenderer.addClassBreakInfo(0, Infinity, lgAreaSymbol);
              //areaRenderer.addClassBreakInfo(1001, Infinity, xlAreaSymbol);
              // Set up another class breaks renderer to style the flares individually
              let flareRenderer = new ClassBreaksRenderer({
                symbol: renderer.defaultSymbol
              });
              flareRenderer.field = "clusterCount";

              let smFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [255, 204, 102, 0.8],
                outline: { color: [221, 159, 34, 0.8] }
              };
              let mdFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [102, 204, 255, 0.8],
                outline: { color: [82, 163, 204, 0.8] }
              };
              let lgFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [51, 204, 51, 0.8],
                outline: { color: [41, 163, 41, 0.8] }
              };
              let xlFlareSymbol = {
                type: "simple-marker",
                size: 14,
                color: [250, 65, 74, 0.8],
                outline: { color: [200, 52, 59, 0.8] }
              };
              //flareRenderer.addClassBreakInfo(0, 19, smFlareSymbol);
              // flareRenderer.addClassBreakInfo(20, 150, mdFlareSymbol);
              flareRenderer.addClassBreakInfo(0, Infinity, lgFlareSymbol);
              //flareRenderer.addClassBreakInfo(1001, Infinity, xlFlareSymbol);
              let initOptions = {
                id: layerId,
                clusterRenderer: renderer,
                areaRenderer: areaRenderer,
                flareRenderer: flareRenderer,
                //singlePopupTemplate: popupTemplate,
                spatialReference: { wkid: wkid },
                subTypeFlareProperty: clusterOptions.flareProperty,
                singleFlareTooltipProperty: clusterOptions.name || "name",
                displaySubTypeFlares: true,
                maxSingleFlareCount: 8,
                singleSymbol: defaultSym,
                clusterRatio: 75,
                clusterAreaDisplay: "activated",
                xPropertyName: clusterOptions.lng,
                yPropertyName: clusterOptions.lat,
                data: data,
                clusterToScale: 20000
              };
              let clusterLayer = new FlareClusterLayer.FlareClusterLayer(
                initOptions
              );
              _this.mainMap.add(clusterLayer);
              resolve(true);
            });
          }
        )
        .catch(err => {
          console.log("地图加载失败", err);
        });
    }
  }
};
</script>
<style scoped>
@import url("https://survey-oss.e-tudou.com/arcgis-api/esri/css/main.css");
#infoDiv {
  position: absolute;
  top: 15px;
  left: 60px;
}

#infoDiv input {
  border: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}
</style>